<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片/文件上传文档 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res.layui.com/images/layui/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<ul class="site-dir">
  <li><a href="#use"><cite>使用</cite></a></li>
  <li><a href="#exports"><cite>核心方法</cite></a></li>
  <li><a href="#api"><cite>上传接口</cite></a></li>
  <li><a href="#before"><cite>执行上传前的回调</cite></a></li>
  <li><a href="#success"><cite>上传完毕后的回调</cite></a></li>
  <li><a href="#type"><cite>设置文件类型</cite></a></li>
  <li><a href="#ext"><cite>自定义支持的文件格式</cite></a></li>
  <li><a href="#text"><cite>自定义文本</cite></a></li>
  <li><a href="#unwrap"><cite>不改变input风格</cite></a></li>
</ul>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="../element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="../element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li >
      <a href="laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li class="layui-this">
      <a href="upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1"><i class="layui-icon">&#xe62f;</i>图片/文件上传 - layui.upload</h1>
    <div class="site-tips site-text">
      <p>这是一个麻雀虽小五脏俱全的文件上传组件，不仅仅只是对图片的上传方案，对普通文件、视频、音频都做了内置支持。不过它目前是单文件上传，还无法一次性上传多文件，但却足以应付许多的项目需求了。使用layui的upload模块你将会发现是那样的简单，仿佛就像是一个Ajax的调用。不妨顺着下述的文档感受一下吧！</p>
    </div>
    <div class="site-tips site-text">
      <p>模块加载名称：<a>upload</a></p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <div class="site-title">
      <a name="use"></a>
      <fieldset><legend>使用</legend></fieldset>
    </div>
    <div class="site-text">
      <p>一切从小试牛刀开始。通常情况下，我们上传文件是借助type为file的input标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面就是一个非常普通的input，它可以出现你页面的任何位置。</p>
      <pre class="layui-code" lay-title="HTML">
&lt;input type="file" name="file（可随便定义）" class="layui-upload-file">
      </pre>
      <p>另外class="layui-upload-file"不是必须的，她只是会让你的input短暂性隐藏，并且在调用upload方法时不用设置elem。要使得这个input能正常地用起来，你只需要执行下述方法：</p>
      <pre class="layui-code" lay-title="JavaScript">
layui.upload({
  url: '上传接口url'
  ,success: function(res){
    console.log(res); //上传成功返回值，必须为json格式
  }
});      
      </pre>
      <p>效果如下所示（此处没有配置有效的上传接口，实际使用设定一下url就行了）：</p>
      <input type="file" name="file-demo" class="layui-upload-file">
    </div>
    
    <div class="site-title">
      <a name="exports"></a>
      <fieldset><legend>核心方法</legend></fieldset>
    </div>
    <div class="site-text">
      <p>语法：<a>layui.upload(options)</a></p>
      <pre class="layui-code" lay-title="加载">
layui.use('upload', function(){
  layui.upload(options);
});
      </pre>
      <p>options是一个对象参数，可支持的key如下表</p>
      <table class="site-table">
        <thead>
          <tr>
            <th>参数</th>
            <th>类型</th>
            <th>描述</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>elem</td>
            <td>string</td>
            <td>指定元素的选择器，默认直接查找class为layui-upload-file的元素</td>
          </tr>
          <tr>
            <td>url</td>
            <td>string</td>
            <td>上传文件的接口</td>
          </tr>
          <tr>
            <td>method</td>
            <td>string</td>
            <td>设置http类型，如：post、get。默认post。也可以直接在input设置lay-method="get"来取代。</td>
          </tr>
          <tr>
            <td>before</td>
            <td>function</td>
            <td>执行上传前的回调</td>
          </tr>
          <tr>
            <td>success</td>
            <td>function</td>
            <td>上传成功后的回调</td>
          </tr>
          <tr>
            <td>type</td>
            <td>string</td>
            <td>设定上传的文件类型，也可以直接在input设置lay-type=""来取代（详细见下文）。</td>
          </tr>
          <tr>
            <td>ext</td>
            <td>string</td>
            <td>自定义可支持的文件扩展名，也可以直接在input设置lay-ext=""来取代（详细见下文）。</td>
          </tr>
          <tr>
            <td>unwrap</td>
            <td>boolean</td>
            <td>是否不改变input的样式风格。默认false</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="site-title">
      <a name="api"></a>
      <fieldset><legend>上传接口</legend></fieldset>
    </div>
    <div class="site-text">
      <p>像设置Ajax的url一样，你也需要对文件的上传指定一个接口。该接口所返回的信息必须是一个标准的json格式，你可以任意定义返回的字段。假设你设定了一个<a>url: "/upload"</a>，那么执行上传后，它可以返回如下信息（只要是json即可）</p>
      <pre class="layui-code" lay-title="Response" lay-skin="notepad">
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.abc.com/123.jpg"
  }
}     
      </pre>
      <p>你不一定非得返回上述格式，注意：只要是返回json即可。其响应信息会如数传递给success回调。</p>
    </div>
    
    <div class="site-title">
      <a name="before"></a>
      <fieldset><legend>执行上传前的回调</legend></fieldset>
    </div>
    <div class="site-text">
      <p>触发文件上传后，在它成功上传之前，你肯定想做些什么，譬如loading？没错，before可以帮助你完成这些交互。</p>
      <pre class="layui-code" lay-title="Javascript">
layui.upload({
  url: ''
  ,<a>before</a>: function(input){
    //返回的参数item，即为当前的input DOM对象
    console.log('文件上传中');
  }
  ,success: function(res){
    console.log('上传完毕');
  }
});  
      </pre>
    </div>
    
    <div class="site-title">
      <a name="success"></a>
      <fieldset><legend>上传成功后的回调</legend></fieldset>
    </div>
    <div class="site-text">
      <p>无论文件是否真的上传成功，只要是经过了服务器，都会进入该回调。并返回两个参数，分别为：响应信息、当前的input对象</p>
      <pre class="layui-code" lay-title="Javascript">
layui.upload({
  url: ''
  ,<a>success</a>: function(res, input){
    console.log(res); //如：{"code":0 ,"msg":"","url":"http://cdn.abc.com/123.jpg"'} 
  }
});  
      </pre>
      <p>那么你就可以根据返回的res做一些交互分支了。</p>
    </div>
    
    <div class="site-title">
      <a name="type"></a>
      <fieldset><legend>设置文件类型</legend></fieldset>
    </div>
    <div class="site-text">
      <p>一开始就提到，我们支持各种文件类型的上传。通知设置<a>type</a>后，upload组件将默认对文件类型做校验处理。type所支持的值如下表：</p>
      <table class="site-table">
        <thead>
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>images</td>
            <td>图片类型。默认，不用设定</td>
          </tr>
          <tr>
            <td>file</td>
            <td>普通文件类型。</td>
          </tr>
          <tr>
            <td>video</td>
            <td>视频文件类型。</td>
          </tr>
          <tr>
            <td>audio</td>
            <td>音频文件类型。</td>
          </tr>
        </tbody>
      </table>
      <p>除了在layui.upload()方法中设置type，你还可以直接在input元素上设置lay-type属性，我们更推荐你这样做。如：</p>
      <pre class="layui-code">
&lt;input type="file" name="" <a>lay-type="video"</a> class="layui-upload-file">
      </pre>
    </div>
    
    <div class="site-title">
      <a name="ext"></a>
      <fieldset><legend>自定义支持的文件格式</legend></fieldset>
    </div>
    <div class="site-text">
      <p>尽管我们内置了各文件类型的校验，但有的时候，你可能要自己定义你网站所支持上传的文件格式。那么通过设置<a>ext</a>即可实现</p>
      <pre class="layui-code">
layui.upload({
  url: ''
  <a>,ext: 'jpg|png|gif'</a> //那么，就只会支持这三种格式的上传。注意是用|分割。
  ,success: function(res, input){}
});        
      </pre>
      
      <p>和type一样，除了在layui.upload()方法中设置，你还可以直接在input元素上设置lay-ext属性，如：</p>
      <pre class="layui-code">
&lt;input type="file" name="" <a>lay-ext="jpg|png|gif"</a> class="layui-upload-file">      
      </pre>
    </div>
    
    <div class="site-title">
      <a name="text"></a>
      <fieldset><legend>自定义文本</legend></fieldset>
    </div>
    <div class="site-text">
      <p>默认情况下，我们对按钮输出的文本是：上传图片，或上传文件/视频/音频，如果你想定义一个不一样的文本，使用参数<a>title</a>即可，如：</p>
      <pre class="layui-code">
layui.upload({
  url: ''
  <a>,title: '请上传压缩包吧亲'</a>
  ,ext: 'zip|rar'
  ,type: 'file'
  ,success: function(res, input){}
});        
      </pre>
      
      <p>除了在layui.upload()方法中设置，你还可以直接在input元素上设置lay-title</p>
      <pre class="layui-code">
&lt;input type="file" name="" lay-ext="zip|rar" lay-type="file" <a>lay-title="请上传一张图片吧亲"</a> class="layui-upload-file">      
      </pre>
    </div>
    
    <div class="site-title">
      <a name="unwrap"></a>
      <fieldset><legend>不重置input风格</legend></fieldset>
    </div>
    <div class="site-text">
      <p>我们默认会对你的文件表单框做一个UI的重置，但有时你的上传按钮是实现好了的或者你就是想要原始的文件表单风格，你仅仅只是想要一个上传媒介，而并不想要他的UI被改变。那么你可以通过设置<a>unwrap</a>去做过，它是一个布尔型，当为true时，就不会重置你想要的风格了。</p>
      <pre class="layui-code">
layui.upload({
  url: ''
  <a>,unwrap: true</a> //其实就是不向你的input包裹upload组件的ui元素
  ,success: function(res, input){}
});        
      </pre>
      
      <p>比如你丫的就是想要一个光秃秃的input框呢，试着上传一下吧（虽然也并没有配接口）：</p>
      <div class="site-tips">
        <input type="file" id="demo-upload-unwrap">
      </div>
      <p>当然，upload模块还会持续加强。</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>

<script>
layui.use('upload', function(){
  layui.upload({
    url: '/upload/'
    ,success: function(res){
      console.log(res); //上传成功返回值
    }
  });
  
  //unwrap
  layui.upload({
    url: '/upload/'
    ,elem: '#demo-upload-unwrap'
    ,unwrap: true
    ,success: function(res, input){}
  })
});
</script>
</body>
</html>